<template>
  <el-row :gutter="12">
    <el-col :span="12" :xs="24" :sm="24" :md="24" :lg="12">
      <Card title="访问量">
        <BarChart :data="barData" />
      </Card>
    </el-col>
    <el-col :span="12" :xs="24" :sm="24" :md="24" :lg="12">
      <Card title="区域排名"></Card>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import Card from '@/components/Card/index.vue';
import BarChart from '@/components/BarChart/index.vue';
import { reactive } from 'vue';
// 8765, 4985, 4800, 13567, 4798, 9867, 3298, 13532, 6534, 8345, 8235, 6587,
const barData = reactive([
  { x: '1月', y: 8765 },
  { x: '2月', y: 4985 },
  { x: '3月', y: 4800 },
  { x: '4月', y: 13567 },
  { x: '5月', y: 4798 },
  { x: '6月', y: 9867 },
  { x: '7月', y: 3298 },
  { x: '8月', y: 13532 },
  { x: '9月', y: 6534 },
  { x: '10月', y: 8345 },
  { x: '11月', y: 8235 },
  { x: '12月', y: 6587 },
]);
</script>
